<template>
  <div>
    <create-data-form
      ref="createDataForm"
      :parentId="parentId"
      @ok="getList"
    />
    <a-card :bordered="false">
      <div class="table-operations">
        <a-button
          v-hasPermi="['platform:area:add']"
          ghost
          size="small"
          type="primary"
          @click="$refs.createDataForm.handleAdd()">
          <a-icon type="plus" />
          新增
        </a-button>
        <a-button
          :loading="loading"
          :style="{float: 'right'}"
          icon="reload"
          shape="circle"
          size="small"
          type="dashed"
          @click="getList" />
      </div>
      <a-table
        :columns="columns"
        :data-source="list"
        :loading="loading"
        :pagination="false"
        :size="tableSize"
        rowKey="areaId">
        <span slot="operation" slot-scope="text, record">
          <a @click="$refs.createDataForm.handleUpdate(record)" v-hasPermi="['platform:area:edit']">
            修改
          </a>
          <a-divider type="vertical" />
          <a @click="handleDelete(record)" v-hasPermi="['platform:area:remove']" style="color: red;">
            删除
          </a>
        </span>
      </a-table>
      <a-pagination
        :current="queryParam.pageNum"
        :page-size="queryParam.pageSize"
        :showTotal="total => `共 ${total} 条`"
        :total="total"
        class="ant-table-pagination"
        show-quick-jumper
        show-size-changer
        @change="changeSize"
        @showSizeChange="onShowSizeChange"
      />
    </a-card>
  </div>
</template>

<script>

import { listArea } from '@/api/platform/area'
import CreateDataForm from './CreateDataForm'
import { delData } from '@/api/system/dict/data'

export default {
  name: 'AreaData',
  props: {
    parentId: {
      type: Number,
      required: true
    }
  },
  components: {
    CreateDataForm
  },
  data () {
    return {
      // 按钮点击加载
      loading: false,
      // 数据集
      list: [],
      // 多选ids
      ids: [],
      // 非多个禁用
      multiple: true,
      // 数据总量
      total: 0,
      // 查询参数
      queryParam: {
        areaId: undefined,
        parentId: undefined,
        areaName: undefined,
        pageNum: 1,
        pageSize: 10
      },
      // 数据列
      columns: [
        {
          title: '主键',
          dataIndex: 'areaId',
          ellipsis: true,
          align: 'center'
        },
        {
          title: '商圈名称',
          dataIndex: 'areaName',
          align: 'center'
        },
        {
          title: '人口规模',
          dataIndex: 'populationSize',
          align: 'center'
        },
        {
          title: '新房房价',
          dataIndex: 'newHomePrices',
          align: 'center'
        },
        {
          title: '二手房价格',
          dataIndex: 'oldHomePrices',
          ellipsis: true,
          align: 'center'
        },
        {
          title: '地铁站数量',
          dataIndex: 'subway',
          ellipsis: true,
          align: 'center'
        },
        {
          title: '公交站数量',
          dataIndex: 'bus',
          ellipsis: true,
          align: 'center'
        },
        {
          title: '操作',
          dataIndex: 'operation',
          scopedSlots: { customRender: 'operation' },
          align: 'center'
        }
      ]
    }
  },
  created () {
    this.queryParam.parentId = this.parentId
    this.getList()
  },
  methods: {
    getList () {
      this.loading = true
      listArea(this.queryParam).then(response => {
          this.list = response.rows
          this.total = response.total
          this.loading = false
        }
      )
    },
    /** 搜索按钮操作 */
    handleQuery () {
      this.queryParam.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery () {
      this.queryParam = {
        areaId: undefined,
        parentId: undefined,
        areaName: undefined,
        pageNum: 1,
        pageSize: 10
      }
      this.handleQuery()
    },
    /** 分页改变事件 */
    onShowSizeChange (current, pageSize) {
      this.queryParam.pageSize = pageSize
      this.getList()
    },
    changeSize (current, pageSize) {
      this.queryParam.pageNum = current
      this.queryParam.pageSize = pageSize
      this.getList()
    },
    /** 删除按钮操作 */
    handleDelete (row) {
      const that = this
      const areaIds = row.areaId || this.ids
      this.$confirm({
        title: '删除提示',
        content: row.areaName ? '确定要删除' + row.areaName + '的数据吗？' : '确定要删除选中的数据吗？',
        onOk () {
          return delData(areaIds)
            .then(() => {
              that.onSelectChange([], [])
              that.getList()
              that.$message.success(
                '删除成功',
                3
              )
            })
        },
        onCancel () {
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
